mat-form-field {
  width:100%;
}
.export-content {
  display:flex;
  align-items: flex-start;
  flex-wrap: wrap;
  .export-form {
    flex:1;
    display:flex;
    flex-wrap: wrap;
    justify-content:space-between;
    .style-form-title {
      width: 100%;
      margin-bottom:8px;
    }
    .style-form-fill {
      width: calc(33% - 4px);
    }
    .style-form-stroke {
      width: calc(67% - 4px);
      .style-form-stroke-fields {
        display: flex;
        flex-wrap: wrap;
        justify-content:space-between;
        .style-form-stroke-field {
          width: calc(50% - 4px);
        }
      }
    }
    .viewbox-form-title {
      width: 100%;
      margin:8px 0;
      display:flex;
      align-items: center;
      div {
        flex:1;
      }
    }
    .viewbox-form-field {
      width:calc( 25% - 6px);
    }
  }
  .preview {
    width:324px;
    app-path-preview {
      margin:0 0 0 24px;
    }
  }
}


@media screen and (max-width: 850px) {
  .style-form-fill {
    width: 100% !important;
  }
  .style-form-stroke {
    width: 100% !important;
  }
  .viewbox-form-field {
    width:calc( 50% - 4px) !important;
  }
}

@media screen and (max-width: 700px) {
  .preview {
    width:100% !important;
    svg {
      width: 100% !important;
      margin: 0 !important;
    }
  }
}
